/** 
  编辑报送材料
*/
<template>
  <div class="edit-submit-material-container">
    <div class="sub-title">{{ $t('baseAssessSetting.baseInfo') }}</div>
    <table class="table-style-baseinfos">
      <tbody>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.internshipBaseName') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseName }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.baseLevel') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseLevelName }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.localProvinceAndCity') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.provinceCity }}</td>
          <td class="text-right-background-color">{{ $t('baseAssess.address') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.address }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.startTime') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.startTime }}</td>
          <td class="text-right-background-color">{{ $t('baseAssess.endTime') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.endTime }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('templateSetting.assessmentTemplate') }}:</td>
          <td colspan="3" class="text-left-background-none">
            <el-button type="text" @click="selectAssessIndexInfo">{{ dataListProp.baseExamineSettingVO.templateName }}</el-button>
          </td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.examinationDescrip') }}:</td>
          <td class="text-left-background-none" colspan="3">{{ dataListProp.baseExamineSettingVO.examineExplain }}</td>
        </tr>
      </tbody>
    </table>
    <div class="sub-title">{{ $t('baseAssess.submitMaterials') }}</div>
    <el-form class="upload-form" ref="form" :model="form" label-width="80px">
      <el-form-item prop="assessMaterials" :label="$t('baseAssess.assessMaterials')+ ':'" :rules="rulesForm.assessMaterials">
        <el-upload
          v-model="form.assessMaterials"
          class="upload-demo"
          action="/api/commonservice/obsfile/uploadfile"
          :data="uploadConfig.data"
          :before-upload="beforeUpload"
          :on-success="handlerUploadSuccess"
          :before-remove="handlerBeforeRemove"
          :on-remove="handlerRemove"
          :on-error="handlerUploadError"
          :on-preview="downloadMaterial"
          accept=".bmp, .rar, image/png, image/jpeg, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, aplication/zip, application/x-zip-compressed"
          multiple
          :limit="5"
          :file-list="fileList">
          <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <template v-if="dialogMode === 'add' || dialogMode === 'edit'">
        <el-button @click="back('dialogForm')">{{ $t('common.btn.back') }}</el-button>
        <el-button type="primary" @click="save('0')">{{$t('common.btn.save')}}</el-button>
        <el-button type="primary" @click="save('1')">{{$t('common.btn.submit')}}</el-button>
      </template>
      <template v-else-if="dialogMode === 'details'">
        <el-button @click="closeDialog('dialogForm')">{{$t('common.btn.close')}}</el-button>
      </template>
    </div>
    <el-dialog
      @close="assessIndexInfo = {}"
      :title="$t('templateSetting.assessIndexTable')"
      width="70%"
      append-to-body
      :visible.sync="tableFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <assess-index-table  
        :dataListProp="assessIndexInfo"  
        :showFlag="tableFlag"
        :showWeight="false"
        @close="(flag) => { tableFlag = flag }">
      </assess-index-table>
    </el-dialog>
    <el-dialog
      width="25%"
      ref="innerDialog"
      :title="$t('graduateBase.prompt')"
      :visible.sync="innerVisible"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :top="'28vh'">
      <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
      <div style="text-align: right;">
        <el-button type="primary" @click="confirmInner('innerDialog')">{{$t('common.btn.confirm')}}</el-button>
        <el-button @click="cancelInner('innerDialog')">{{$t('common.btn.cancel')}}</el-button>
        <el-button type="primary" @click="confirmAndClose('dialogForm')">{{$t('graduateBase.saveAndClose')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import assessIndexTable from "../templateSetting/assessIndexTable";
import { downloadfile } from "common/src/api/upload";
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent';
export default {
  components: {
    'assess-index-table': assessIndexTable
  },
  props: {
    submitMaterialInfo: {
      type: Object,
      default: () => {}
    },
    dialogMode: {
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {
      fileList: [],
      userInfo: {},
      fileFlag: true,
      dataListProp: {},
      assessIndexInfo: {},
      tableFlag: false,
      form: {
        assessMaterials: ''
      },
      tableData: [],
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' },
      },
      applyForm: {
        attachFile: [],
        attachName: []
      },
      innerVisible: false,
      rulesForm: {
        assessMaterials: [
          { required: true, message: this.$t('baseAssess.requireAssessMaterial'), trigger: 'change' }
        ]
      }
    }
  },
  filters: {
  },
  mounted() {
    // 获取当前用户权限
    let sessiondata = JSON.parse(localStorage.getItem("sessiondata"))
    if (sessiondata) {
      if (sessiondata.mockUser || sessiondata.user) {
        this.userInfo = sessiondata.mockUser || sessiondata.user
      }
    }
  },
  methods: {
    // 内层确认框-确认
    confirmInner() {
      this.innerVisible = false
      this.$emit('close-edit-dialog')
    },
    // 内层确认框-取消
    cancelInner() {
      this.innerVisible = false
    },
    // 内层确认框-保存并取消
    confirmAndClose() {
      this.innerVisible = false
      this.save('0')
    },
    handlerBeforeRemove(file, fileList) {
      if (this.fileFlag) {
        return this.$delConfirm().then(_ => {})
      }
    },
    handlerRemove(file, fileList) {
      let index = this.applyForm.attachFile.indexOf(file.url)
      this.applyForm.attachFile.splice(index, 1)
      this.applyForm.attachName.splice(index, 1)
    },
    beforeUpload(file) {
      const fileSizeFlag = file.size && file.size / 1024 / 1024 < 10
      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      const uploadFlag = fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png' || fileType === 'bmp' || fileType === 'doc' || fileType === 'docx' || fileType === 'xls' || fileType === 'xlsx' || fileType === 'pdf' || fileType === 'zip' || fileType === 'rar'
      if (!uploadFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("minor.approve.uploadFileError"),
          callback: () => {
          }
        })
      }
      if (!fileSizeFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("minor.approve.uploadSizeError"),
          callback: () => {
          }
        })
      }
      this.fileFlag = (uploadFlag && fileSizeFlag)
      if (!(uploadFlag && fileSizeFlag)) {
        return false
      }
    },
    handlerUploadSuccess(response, file, fileList) {
      let responseCode = response.code
      if (responseCode === 200) {
        this.applyForm.attachFile.push(
          Object.values(response.data)[0].objectkey
        )
        this.applyForm.attachName.push(
          Object.values(response.data)[0].fileName
        )
        this.$refs['form'].resetFields()
      }
    },
    handlerUploadError(response, file, fileList) {
      this.$message({
        message: this.$t('graduateBase.uploadFail'),
        type: 'error',
      })
    },
    downloadMaterial(file) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    },
    // 查看考核指标表
    selectAssessIndexInfo() {
      this.tableFlag = true;
      graduateStudentApi.querySpecialListAssessIndex({
        "baseExamineId": this.submitMaterialInfo.id,
        "templateId": this.submitMaterialInfo.baseExamineSettingVO.templateId,
        "account": this.userInfo.uid
      }).then(res => {
        if (res.code === 200) {
          this.assessIndexInfo = res.data
        }
      })
    },
    // 返回
    back() {
      if (this.fileList.length > 0) {
        this.innerVisible = true
      } else {
        this.innerVisible = false
        this.$emit('close-edit-dialog')
      }
    },
    // 保存
    save(status) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            "id": this.dataListProp.id,
            "status": status,
            "examineMaterial": this.applyForm.attachFile.join(','),
            "examineMaterialName": this.applyForm.attachName.join(',')
          }
          graduateStudentApi.saveOrSubmitBaseAssess(params).then(res => {
            if (res.code === 200) {
              if (status === '0') {
                this.$message.success(this.$t('graduateBase.savedSuccessfully'))
              } else {
                this.$message.success(this.$t('graduateBase.submitSuccessfully'))
              }
              this.$emit('close-edit-dialog')
              this.$emit('refresh-base-assess')
            }
          })
        }
      })
    }
  },
  watch: {
    submitMaterialInfo: {
      handler(newVal) {
        if (newVal) {
          this.dataListProp = JSON.parse(JSON.stringify(newVal))
          this.applyForm.attachFile = this.dataListProp.examineMaterial ? this.dataListProp.examineMaterial.split(',') : []
          this.applyForm.attachName = this.dataListProp.examineMaterialName ? this.dataListProp.examineMaterialName.split(',') : []
          if (this.applyForm.attachName.length > 0) {
            this.fileList = this.applyForm.attachName.map((item, index) => {
              return {
                name: item,
                url: this.applyForm.attachFile[index]
              }
            })
          }
        }
      },
      deep: true,
      immediate: true
    },
    "applyForm.attachName": {
      handler(newVal) {
        this.form.assessMaterials = newVal
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-style-baseinfos {
    table-layout: fixed;
    word-break: break-all;
    margin: 0 0 20px 15px;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 97%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
  }
  .table-style-baseinfo {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
  }
  .table-style-baseinfos td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .table-style-baseinfo td {
    // width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .table-style-baseinfos .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .text-center-background-color {
    background-color: #fdfeff4d;
    text-align: center;
  }
  .text-center-background {
    text-align: center;
  }
  .text-left-background-none {
    text-align: left;
  }
  .sub-title {
    margin: 0 0 15px 5px;
    font-size: 17px;
    color: #2b3b4e;
  }
  .upload-form {
    margin-left: 20px;
  }
  .dialog-footer {
    margin-top: 15px;
    padding: 20px 20px 5px 0;
    text-align: right;
    border-top: 1px solid #c0c4cc;
  }
  .edit-submit-material-container ::v-deep {
    .el-dialog__body {
      word-break: break-all!important;
    }
  }
</style>